<template>
  <require from="./correlation-list.css"></require>
  <require from="../../../../../../pagination/pagination"></require>
  <div class="correlation-container">
    <h3 if.bind="correlations.length === 0" class="correlation-table__empty-message">No Correlations found.</h3>
    <table else class="table table-striped table-hover correlation-table">
      <thead class="correlation-table__head">
        <tr class="correlation-table__table-row">
          <th class="correlation-table__headline" click.delegate="changeSortSettings(correlationListSortProperty.StartedAt)">
            Started at <i if.bind="sortSettings.sortProperty === correlationListSortProperty.StartedAt && showSortOption" class.bind="sortSettings.ascending ? 'fas fa-caret-up' : ' fas fa-caret-down'"></i>
          </th>
          <th class="correlation-table__headline" click.delegate="changeSortSettings(correlationListSortProperty.State)">
            State <i if.bind="sortSettings.sortProperty == correlationListSortProperty.State && showSortOption" class.bind="sortSettings.ascending ? 'fas fa-caret-up' : ' fas fa-caret-down'"></i>
          </th>
          <th class="correlation-table__headline" click.delegate="changeSortSettings(correlationListSortProperty.CorrelationId)">
            Correlation ID <i if.bind="sortSettings.sortProperty === correlationListSortProperty.CorrelationId && showSortOption" class.bind="sortSettings.ascending ? 'fas fa-caret-up' : ' fas fa-caret-down'"></i>
          </th>
        </tr>
      </thead>
      <tbody class="correlation-table__body">
        <tr if.bind="showCorrelationToSelect" dblclick.delegate="showProcessInstanceList()" class="correlation-table__table-row correlation-table__table-row--instance-to-select" class.bind="correlationToSelectTableEntry.correlationId === selectedTableEntry.correlationId ? 'correlation-table__selected-entry': ''" click.delegate="selectCorrelation(correlationToSelectTableEntry)">
          <td class="correlation-table__table-entry">${correlationToSelectTableEntry.startedAt}</td>
          <td class="correlation-table__table-entry correlation-table__table-entry--state">${correlationToSelectTableEntry.state}</td>
          <td class="correlation-table__table-entry">${correlationToSelectTableEntry.correlationId}</td>
        </tr>
        <tr dblclick.delegate="showProcessInstanceList()" class="correlation-table__table-row" repeat.for="tableEntry of sortedTableData" class.bind="tableEntry.correlationId === selectedTableEntry.correlationId ? 'correlation-table__selected-entry': ''" click.delegate="selectCorrelation(tableEntry)">
          <td class="correlation-table__table-entry">${tableEntry.startedAt}</td>
          <td class="correlation-table__table-entry correlation-table__table-entry--state">${tableEntry.state}</td>
          <td class="correlation-table__table-entry">${tableEntry.correlationId}</td>
        </tr>
        <tr if.bind="totalCount > minPageSize" class="correlation-table__table-row">
          <td>
            <div class="correlation-table__pagesize-entry">
              Page size:
            </div>
            <select class="form-control correlation-table__pagesize-entry--select" value.bind="pageSize">
              <option model.bind="size" repeat.for="size of pageSizes">${size}</option>
              <option model.bind="0">All</option>
            </select>
          </td>
          <td class="correlation-table__pagination-entry">
            <pagination show.bind="pageSize < totalCount && pageSize > 0" view-model.ref="pagination" current-page.two-way="currentPage" per-page.to-view="pageSize" items.to-view="totalCount" max-pages-to-display.to-view="paginationSize" content-is-async.bind="true" is-loading.two-way="paginationShowsLoading"></pagination>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
